<template>
  <div :class="['record-cell-container', isSelected ? 'selected' : '']" @click="onSelect">
    <van-checkbox
      style="width: 30px"
      shape="square"
      checked-color="#436BFF"
      icon-size="16px"
      v-model="checked"
      @click.stop="onClickCheckBox"
      v-show="batchEdit"
    ></van-checkbox>
    <div v-show="cp_checked"></div>
    <div class="content">
      <van-row align="center">
        <img
          v-show="isSelected"
          class="icon"
          src="../../../icons/svg/productAssistant/productAss_icon.svg"
        />
        <img
          v-show="!isSelected"
          class="icon"
          src="../../../icons/svg/productAssistant/productAss_unpinned_icon.svg"
        />
        <div>
          <div>{{ item && item.topic }}</div>
          <p>{{ item && item.createdTime.slice(0, 10) }}</p>
        </div>
      </van-row>

      <van-popover
        show-arrow:
        false
        v-model:show="showPopover"
        :actions="actions"
        @select="onSelectPopoverItem"
      >
        <template #reference>
          <img
            class="more-icon"
            v-show="!isBatchEdit"
            src="../../../icons/svg/productAssistant/more_icon.svg"
            @click.stop="onClickMoreAction"
          />
        </template>
      </van-popover>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from "vue";
import { useProductStore } from "@/store";
import { showConfirmDialog } from "vant";

const store = useProductStore();

const props = defineProps({
  item: {
    type: Object,
  },
});
const emit = defineEmits(["onSelectItem"]);

const isSelected = computed(() => {
  return (
    props.item && store.currentRecordItem && store.currentRecordItem.id === props.item.id
  );
});

const pinned = computed(() => {
  return props.item.pinned;
});

const isBatchEdit = computed(() => {
  return store.isBatchEdit;
});

function onSelect() {
  if (store.isBatchEdit) return;
  emit("onSelectItem");
}

function onSelectPopoverItem(action, index) {
  if (index === 0) onClickPinned();
  if (index === 1) onClickEdit();
  if (index === 2) onClickDelete();
}

function onClickPinned() {
  store.pinnedGoodsChatInfo(props.item.id, !props.item.pinned);
}

function onClickEdit() {
  store.changeEditDialogState(true, props.item.id);
}

function onClickDelete() {
  showConfirmDialog({
    title: "提示",
    message: " 删除后将无法回退，确认删除吗?",
  })
    .then(() => {
      store.deleteGoodsChatInfoAction([props.item.id]);
    })
    .catch(() => {
      // on cancel
    });
}

const actions = computed(() => {
  return [
    { text: props.item.pinned ? "取消置顶" : "置顶" },
    { text: "编辑" },
    { text: "删除" },
  ];
});

const showPopover = ref(false);
function onClickMoreAction() {
  showPopover.value = true;
}

const batchEdit = computed(() => {
  return store.isBatchEdit;
});

const checked = ref(store.onCheckedRecord.indexOf(props.item.id) !== -1);
const cp_checked = computed(() => {
  const tmepChecked = store.onCheckedRecord.indexOf(props.item.id) !== -1;
  checked.value = tmepChecked;
  return tmepChecked;
});

function onClickCheckBox() {
  store.changeCheckedRecord(checked.value, props.item.id);
  let array = document.getElementsByClassName("record-cell-container");
  console.log("onClickCheckBox :>> ", array);
}
</script>

<style scoped>
.record-cell-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 62px;
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 12px;
}

.selected {
  border: 1px solid #436bff;
  border-radius: 8px;
  background-color: rgba(67, 107, 255, 0.06);
}

.icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.more-icon {
  width: 16px;
  height: 16px;
}
</style>
